<template>
    <div>
        <div v-if="!isMiniprogram" id="mychart-dom" style="height:300px"></div>
        <ec-canvas v-if="isMiniprogram" id="mychart-dom-line" canvas-id="mychart-line" :ec="ec"></ec-canvas>
        
        <van-button type="default" @click="showCalendar=true">打开日历</van-button>
        <van-button type="primary">主要按钮</van-button>
        <van-button type="info">信息按钮</van-button>
        <van-button type="warning">警告按钮</van-button>
        <van-button type="danger" @click="$navjumper.go('/other')">跳转other页</van-button>
        <van-calendar v-if="!isMiniprogram" v-model="showCalendar" @confirm="onConfirm" />
        <van-calendar v-if="isMiniprogram" :show="showCalendar" @confirm="onConfirm" />
    </div>
</template>

<script>

export default {
    name: '',
    components: {},
    data (){
        return {
            //echart对象
            isWeb : false,
            chartObj : null,
            ec: {
                onInit: this.initChart
            },
            //日历
            showCalendar : false,
        }
    },
    methods: {
        onConfirm(res){
            this.showCalendar = false;
            var date = process.env.isMiniprogram ? new Date(res.detail) : res;
            var str = `${date.getMonth() + 1}/${date.getDate()}`;
            console.log(str)

        },
        initChart(canvas, width, height, dpr , echarts){
            var vue = this;
            vue.chartObj = echarts.init(canvas, null, {
                width: width,
                height: height,
                devicePixelRatio: dpr // new
            });
            canvas.setChart(vue.chartObj);
            return vue.chartObj;
        },
        setEchartOption(){
            var vue = this;
            if(!vue.chartObj){
                setTimeout(function(){
                    vue.setEchartOption();
                },200);
                return;
            }
            var option = {
                grid:{
                     x:10,
                     y:30,
                     x2:0,
                     y2:-20,
                     borderWidth:1
                 },
                color: ["#fe6228", "#28c4fe"],
                legend: {
                    //对应series
                    data: ['test'],
                    top: 20,
                    left: 'center',
                    z: 100
                },
                grid: {
                    containLabel: true
                },
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    triggerOn: 'click',
                    formatter: function (params) {
                        var data = params[0];

                        var html = `${data.seriesName}：${data.value}\n检查日期：${data.axisValue}`;
                        if(vue.xAxisDataTmp){
                            var time = vue.xAxisDataTmp[data.dataIndex]
                            html = `${data.seriesName}：${data.value}\n检查日期：${time}`;
                        }
                        return html;
                        
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['12-10', '12-11', '12-12'],
                // show: false
                },
                yAxis: {
                    x: 'center',
                    type: 'value',
                    splitLine: {
                        lineStyle: {
                            type: 'dashed'
                        }
                    }
                // show: false
                },
                series: [
                    {
                        name: 'test',
                        type: 'line',
                        smooth: true,
                        data: [2.0, 3.0, 4.0]
                    }, 
                    // {
                    //     name: 'mg',
                    //     type: 'line',
                    //     smooth: true,
                    //     data: [12, 50, 51]
                    // }
                ]
            };
            vue.chartObj.setOption(option);
        },
    },
    created() {
        this.isMiniprogram = process.env.isMiniprogram
    },
    mounted(){
        //web端
        if(!this.isMiniprogram){
            this.chartObj = this.$echarts.init(document.getElementById('mychart-dom'));    
            // this.$Toast('提示内容');

        }
        
        this.setEchartOption()
    }

  
}
</script>

<style lang="less">
</style>
